{{ define "js"}}
	<script type="text/javascript">
        function viewGraffitiAs(type) {
            var graffitiHex = $("[aria-graffiti]").attr("aria-graffiti");

            if (type === "hex") {
                $("#graffiti").text("0x" + graffitiHex)
            } else {
                try {
                    var r = decodeURIComponent(graffitiHex.replace(/\s+/g, '').replace(/[0-9a-f]{2}/g, '%$&'));
                    $("#graffiti").text(r)
                } catch (e) {
                    $("#graffiti").text(hex2a(graffitiHex.replace("0x", "")))
                }
            }
        }

        function hex2a(hexx) {
            var hex = hexx.toString();//force conversion
            var str = '';
            for (var i = 0; i < hex.length; i += 2)
                str += String.fromCharCode(parseInt(hex.substr(i, 2), 16));
            return str;
        }

        // Javascript to enable link to tab
        var url = document.location.toString();
        if (url.match('#')) {
            // console.log('.nav-pills a[href="#' + url.split('#')[1] + '"]');
            $('.nav-pills a[href="#' + url.split('#')[1] + '"]').tab('show');
        }

        // Change hash for page-reload
        $('.nav-pills a').on('shown.bs.tab', function (e) {
            if (history.pushState) {
                history.pushState(null, null, e.target.hash);
            } else {
                location.hash = e.target.hash;
            }
        })
	</script>
{{end}}

{{ define "css"}}
{{end}}

{{ define "content"}}
	<div class="my-3">
		<div class="d-md-flex py-2 justify-content-md-between">
			<h1 class="h4 mb-1 mb-md-0">
                {{if gt .PreviousSlot 0}}
					<a href="/block/{{.PreviousSlot}}"><i class="fa fa-chevron-left"></i></a>
                {{end}}
				<span class="ml-1 mr-1"><i class="fas fa-cube mr-2"></i>Block at Slot {{.Slot}}</span>
                {{if gt .NextSlot 0}}
					<a href="/block/{{.NextSlot}}"><i class="fa fa-chevron-right"></i></a>
                {{end}}
			</h1>
			<nav aria-label="breadcrumb">
				<ol class="breadcrumb font-size-1 mb-0" style="padding:0; background-color:transparent;">
					<li class="breadcrumb-item"><a href="/" title="Home">Home</a></li>
					<li class="breadcrumb-item"><a href="/blocks" title="Blocks">Blocks</a></li>
					<li class="breadcrumb-item active" aria-current="page">Block details</li>
				</ol>
			</nav>
		</div>
	</div>
	<ul style="margin-bottom: -1px;" class="nav nav-tabs justify-content-start" id="pills-tab" role="tablist">
		<li class="nav-item">
			<a class="nav-link active" id="pills-overview-tab" data-toggle="pill" href="#pills-overview" role="tab" aria-controls="pills-overview" aria-selected="true">Overview</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" id="pills-votes-tab" data-toggle="pill" href="#pills-votes" role="tab" aria-controls="pills-votes" aria-selected="false">Votes <span class="badge bg-secondary text-white">{{.VotesCount}}</span></a>
		</li>
		<li class="nav-item">
			<a class="nav-link" id="pills-attestations-tab" data-toggle="pill" href="#pills-attestations" role="tab" aria-controls="pills-attestations" aria-selected="false">Attestations <span class="badge bg-secondary text-white">{{.AttestationsCount}}</span></a>
		</li>
								{{if gt .DepositsCount 0}}
			<li class="nav-item">
				<a class="nav-link" id="pills-deposits-tab" data-toggle="pill" href="#pills-deposits" role="tab" aria-controls="pills-deposits" aria-selected="false">Deposits <span class="badge bg-secondary text-white">{{.DepositsCount}}</span></a>
			</li>
								{{end}}
								{{if gt .VoluntaryExitscount 0}}
			<li class="nav-item">
				<a class="nav-link" id="pills-voluntary-exits-tab" data-toggle="pill" href="#pills-voluntary-exits" role="tab" aria-controls="pills-voluntary-exits" aria-selected="false">Voluntary Exits <span class="badge bg-secondary text-white">{{.VoluntaryExitscount}}</span></a>
			</li>
								{{end}}
	</ul>
	<style>
		.block-card {
			border-top-left-radius: 0;
			border-top-right-radius: 0;
		}
	</style>
	<div class="card block-card">
		<div style="margin-bottom: -.25rem;" class="card-body px-0 py-1">
			<div class="tab-content" id="pills-tabContent">
				<div class="tab-pane fade show active" id="pills-overview" role="tabpanel"
					 aria-labelledby="pills-overview-tab">
					<div class="row border-bottom p-3 mx-0">
						<div class="col-md-2">Epoch:</div>
						<div class="col-md-10"><a href="/epoch/{{.Epoch}}">{{.Epoch}}</a></div>
					</div>
					<div class="row border-bottom p-3 mx-0">
						<div class="col-md-2">Slot:</div>
						<div class="col-md-10"><b>{{.Slot}}</b></div>
					</div>
					<div class="row border-bottom p-3 mx-0">
						<div class="col-md-2">Status:</div>
						<div class="col-md-10">{{formatBlockStatus .Status}}</div>
					</div>
					<div class="row border-bottom p-3 mx-0">
						<div class="col-md-2">Time:</div>
						<div class="col-md-10"><span aria-ethereum-date="{{.Ts.Unix}}">{{.Ts}}</span> (<span
									aria-ethereum-date="{{.Ts.Unix}}" aria-ethereum-date-format="FROMNOW"></span>)
						</div>
					</div>
					<div class="row border-bottom p-3 mx-0">
						<div class="col-md-2">Proposer:</div>
						<div class="col-md-10">{{formatValidator .Proposer}}</div>
					</div>
                    {{ if (or (eq .Status 1) (eq .Status 3)) }}
						<div class="row border-bottom p-3 mx-0">
							<div class="col-md-2">Block Root:</div>
							<div class="col-md-10 text-monospace text-break">0x{{printf "%x" .BlockRoot}}</div>
						</div>
						<div class="row border-bottom p-3 mx-0">
							<div class="col-md-2">Parent Root:</div>
							<div class="col-md-10 text-monospace text-break"><a
										href="/block/{{printf "%x" .ParentRoot}}">0x{{printf "%x" .ParentRoot}}</a>
							</div>
						</div>
						<div class="row border-bottom p-3 mx-0">
							<div class="col-md-2">State Root:</div>
							<div class="col-md-10 text-monospace text-break">0x{{printf "%x" .StateRoot}}</div>
						</div>
						<div class="row border-bottom p-3 mx-0">
							<div class="col-md-2">Signature:</div>
							<div class="col-md-10 text-monospace text-break">0x{{printf "%x" .Signature}}</div>
						</div>
						<div class="row border-bottom p-3 mx-0">
							<div class="col-md-2">Randao Reveal:</div>
							<div class="col-md-10 text-monospace text-break">0x{{printf "%x" .RandaoReveal}}</div>
						</div>
						<div class="row border-bottom p-3 mx-0">
							<div class="col-md-2">Graffiti:</div>
							<div class="col-md-8 text-monospace text-break" id="graffiti"
								 aria-graffiti="{{printf "%x" .Graffiti}}">0x{{printf "%x" .Graffiti}}</div>
							<div class="col-md-2">
								<div class="btn-group btn-group-toggle" data-toggle="buttons">
									<label class="btn btn-secondary active btn-sm" onclick="viewGraffitiAs('hex')">
										<input type="radio" name="options" id="optionHex" checked> Hex
									</label>
									<label class="btn btn-secondary btn-sm" onclick="viewGraffitiAs('utf-8')">
										<input type="radio" name="options" id="optionUTF8"> UTF-8
									</label>
								</div>
							</div>
						</div>
						<div class="row border-bottom p-3 mx-0">
							<div class="col-md-2">Eth 1 Data:</div>
							<div class="col-md-10">
								<div class="row p-1">
									<div class="col-md-2">Block Hash:</div>
									<div class="col-md-10 text-monospace text-break">
										<a href="https://goerli.etherscan.io/block/0x{{printf "%x" .Eth1dataBlockhash}}">0x{{printf "%x" .Eth1dataBlockhash}}</a>
									</div>
								</div>
								<div class="row p-1">
									<div class="col-md-2">Deposit Count:</div>
									<div class="col-md-10 text-monospace text-break">{{.Eth1dataDepositcount}}</div>
								</div>
								<div class="row p-1">
									<div class="col-md-2">Deposit Root:</div>
									<div class="col-md-10 text-monospace text-break">
										0x{{printf "%x" .Eth1dataDepositroot}}</div>
								</div>
							</div>
						</div>
						<div class="row border-bottom p-3 mx-0">
							<div class="col-md-2">Attestations:</div>
							<div class="col-md-10"><b>{{.AttestationsCount}}</b></div>
						</div>
						<div class="row border-bottom p-3 mx-0">
							<div class="col-md-2">Deposits:</div>
							<div class="col-md-10"><b>{{.DepositsCount}}</b></div>
						</div>
						<div class="row border-bottom p-3 mx-0">
							<div class="col-md-2">Voluntary Exits:</div>
							<div class="col-md-10"><b>{{.VoluntaryExitscount}}</b></div>
						</div>
						<div class="row p-3 mx-0">
							<div class="col-md-2">Slashings:</div>
							<div class="col-md-10"><b>{{.AttesterSlashingsCount}}</b> attester &
								<b>{{.ProposerSlashingsCount}}</b> proposer slashings
							</div>
						</div>
                    {{end}}
				</div>
				<div class="tab-pane fade" id="pills-votes" role="tabpanel" aria-labelledby="pills-votes-tab">
					<div class="row p-1">
						<div class="col-md-12 text-center"><b>{{.VotesCount}} validator{{if ne .VotesCount 1}}s{{end}} voted for this block:</b></div>
					</div>
					<div class="table-responsive">
						<table class="table table-sm table-bordered text-center">
                            {{range $i, $vote := .Votes}}
                                {{if mod $i 10 }}
									<tr>
                                {{end}}
								<td style="border-bottom: 1px solid var(--border-color);" class="p-1" data-toggle="tooltip" data-placement="top"
									title="Voted on by validator {{$vote.Validator}} of committee {{$vote.CommitteeIndex}} included in block {{$vote.IncludedIn}}">
                                    {{formatValidator $vote.Validator}}
								</td>
                                {{if or (mod (add $i 1) 10) (eq $i (sub (len $.Votes) 1))}}
									</tr>
                                {{end}}
                            {{end}}
						</table>
					</div>
				</div>
				<div class="tab-pane fade" id="pills-attestations" role="tabpanel"
					 aria-labelledby="pills-attestations-tab">
					 <div class="row border-bottom p-1 mx-0">
						<div class="col-md-12 text-center"><b>Showing {{ .AttestationsCount }} Attestations </b></div>
					</div>
                    {{range $i, $attestation := .Attestations}}
						<div class="row border-bottom p-1 mx-0">
							<div class="col-md-12 text-center"><b>Attestation {{$i}}</b></div>
						</div>
						<div class="row border-bottom p-1 mx-0">
							<div class="col-md-2">Slot:</div>
							<div class="col-md-10"><a href="/block/{{$attestation.Slot}}">{{$attestation.Slot}}</a>
							</div>
						</div>
						<div class="row border-bottom p-1 mx-0">
							<div class="col-md-2">Committee Index:</div>
							<div class="col-md-10">{{$attestation.CommitteeIndex}}</div>
						</div>
						<div class="row border-bottom p-1 mx-0">
							<div class="col-md-2">Aggregation Bits:</div>
							<div class="col-md-10">{{printf "%8b" $attestation.AggregationBits}}</div>
						</div>
						<div class="row border-bottom p-1 mx-0">
							<div class="col-md-2">Validators:</div>
							<div class="col-md-10">
                                {{range $validator := $attestation.Validators}}
									<span><a href="/validator/{{$validator}}">{{$validator}}</a> </span>
                                {{end}}
							</div>
						</div>
						<div class="row border-bottom p-1 mx-0">
							<div class="col-md-2">Beacon Block Root:</div>
							<div class="col-md-10 text-monospace text-break"><a
										href="/block/{{printf "%x" $attestation.BeaconBlockRoot}}">0x{{printf "%x" $attestation.BeaconBlockRoot}}</a>
							</div>
						</div>
						<div class="row border-bottom p-1 mx-0">
							<div class="col-md-2">Source:</div>
							<div class="col-md-10">Epoch <a
										href="/epoch/{{$attestation.SourceEpoch}}">{{$attestation.SourceEpoch}}</a>
								(<span
										class="text-monospace text-break"><a
											href="{{printf "%x" $attestation.SourceRoot}}">0x{{printf "%x" $attestation.SourceRoot}}</a>)</span>
							</div>
						</div>
						<div class="row border-bottom p-1 mx-0">
							<div class="col-md-2">Target:</div>
							<div class="col-md-10">Epoch <a
										href="/epoch/{{$attestation.TargetEpoch}}">{{$attestation.TargetEpoch}}</a>
								(<span
										class="text-monospace text-break"><a
											href="{{printf "%x" $attestation.TargetRoot}}">0x{{printf "%x" $attestation.TargetRoot}}</a>)</span>
							</div>
						</div>
						<div class="row border-bottom p-1 mx-0">
							<div class="col-md-2">Signature:</div>
							<div class="col-md-10 text-monospace text-break">
								0x{{printf "%x" $attestation.Signature}}</div>
						</div>
						<div class="row border-bottom mx-0">
						</div>
                    {{end}}
				</div>
                {{if gt .DepositsCount 0}}
					<div class="tab-pane fade" id="pills-deposits" role="tabpanel" aria-labelledby="pills-deposits-tab">
                        {{range $i, $deposit := .Deposits}}
							<div class="row border-bottom p-1 mx-0">
								<div class="col-md-12 text-center"><b>Deposit {{$i}}</b></div>
							</div>
							<div class="row border-bottom p-1 mx-0">
								<div class="col-md-2">Amount:</div>
								<div class="col-md-10">{{$deposit.Amount | formatBalance}}</div>
							</div>
							<div class="row border-bottom p-1 mx-0">
								<div class="col-md-2">Public Key:</div>
								<div class="col-md-10 text-monospace text-break">0x{{printf "%x" $deposit.PublicKey}}</div>
							</div>
							<div class="row border-bottom p-1 mx-0">
								<div class="col-md-2">Withdrawal Credentials:</div>
								<div class="col-md-10 text-monospace text-break">
									0x{{printf "%x" $deposit.WithdrawalCredentials}}</div>
							</div>
							<div class="row border-bottom p-1 mx-0">
								<div class="col-md-2">Signature:</div>
								<div class="col-md-10 text-monospace text-break">0x{{printf "%x" $deposit.Signature}}</div>
							</div>
							<div class="row border-bottom mx-0">
							</div>
                        {{end}}
					</div>
                {{end}}
                {{if gt .VoluntaryExitscount 0}}
					<div class="tab-pane fade" id="pills-voluntary-exits" role="tabpanel" aria-labelledby="pills-voluntary-exits-tab">
                        {{range $i, $exit := .VoluntaryExits}}
							<div class="row border-bottom p-1 mx-0">
								<div class="col-md-12 text-center"><b>Exit {{$i}}</b></div>
							</div>
							<div class="row border-bottom p-1 mx-0">
								<div class="col-md-2">Validator:</div>
								<div class="col-md-10">{{formatValidator $exit.ValidatorIndex}}</div>
							</div>
							<div class="row border-bottom p-1 mx-0">
								<div class="col-md-2">Signature:</div>
								<div class="col-md-10 text-monospace text-break">0x{{printf "%x" $exit.Signature}}</div>
							</div>
                        {{end}}
					</div>
                {{end}}
			</div>
		</div>
	</div>
{{end}}